<p>A mixed-content is when a resource is loaded with the HTTP protocol, from a website accessed with the HTTPs protocol, thus mixed-content are not
encrypted and exposed to <a href="https://en.wikipedia.org/wiki/Man-in-the-middle_attack">MITM attacks</a> and could break the entire level of
protection that was desired by implementing encryption with the HTTPs protocol.</p>
<p>The main threat with mixed-content is not only the confidentiality of resources but the whole website integrity:</p>
<ul>
  <li> A passive mixed-content (eg: <em>&lt;img src="http://example.com/picture.png"&gt;</em>) allows an attacker to access and replace only these
  resources, like images, with malicious ones that could lead to successful phishing attacks. </li>
  <li> With active mixed-content (eg: <em>&lt;script src="http://example.com/library.js"&gt;</em>) an attacker can compromise the entire website by
  injecting malicious javascript code for example (accessing and modifying the DOM, steal cookies, etc). </li>
</ul>
<h2>Ask Yourself Whether</h2>
<ul>
  <li> The HTTPS protocol is in place and external resources are fetched from the website pages. </li>
</ul>
<p>There is a risk if you answered yes to this question.</p>
<h2>Recommended Secure Coding Practices</h2>
<p>Implement content security policy <em>block-all-mixed-content</em> directive which is supported by all modern browsers and will block loading of
mixed-contents.</p>
<h2>Sensitive Code Example</h2>
<p>In Express.js application the code is sensitive if the <a href="https://www.npmjs.com/package/helmet-csp">helmet-csp</a> or <a
href="https://www.npmjs.com/package/helmet">helmet</a> middleware is used without the <code>blockAllMixedContent</code> directive:</p>
<pre>
const express = require('express');
const helmet = require('helmet');

let app = express();

app.use(
  helmet.contentSecurityPolicy({
    directives: {
      "default-src": ["'self'", 'example.com', 'code.jquery.com']
    } // Sensitive: blockAllMixedContent directive is missing
  })
);
</pre>
<h2>Compliant Solution</h2>
<p>In Express.js application a standard way to block mixed-content is to put in place the <a
href="https://www.npmjs.com/package/helmet-csp">helmet-csp</a> or <a href="https://www.npmjs.com/package/helmet">helmet</a> middleware with the
<code>blockAllMixedContent</code> directive:</p>
<pre>
const express = require('express');
const helmet = require('helmet');

let app = express();

app.use(
  helmet.contentSecurityPolicy({
    directives: {
      "default-src": ["'self'", 'example.com', 'code.jquery.com'],
      blockAllMixedContent: [] // Compliant
    }
  })
);
</pre>
<h2>See</h2>
<ul>
  <li> OWASP - <a href="https://owasp.org/Top10/A05_2021-Security_Misconfiguration/">Top 10 2021 Category A5 - Security Misconfiguration</a> </li>
  <li> OWASP - <a href="https://owasp.org/www-project-top-ten/2017/A3_2017-Sensitive_Data_Exposure">Top 10 2017 Category A3 - Sensitive Data
  Exposure</a> </li>
  <li> <a href="https://developer.mozilla.org/en-US/docs/Web/Security/Mixed_content">developer.mozilla.org</a> - Mixed-content </li>
  <li> <a href="https://developer.mozilla.org/en-US/docs/Web/HTTP/CSP">developer.mozilla.org</a> - Content Security Policy (CSP) </li>
  <li> <a href="https://www.w3.org/TR/CSP3/">w3.org</a> - Content Security Policy Level 3 </li>
</ul>
